/* eslint no-unused-vars:0 */
/**
 *
 * @authors Your tyq
 * @date    2019-04-11 21:20:55
 * @version $Id$
 */

import React from 'react';
import './index.less';
import {
    Form,
    Icon,
    Input,
    Drawer,
    Select,
    Radio,
    Button,
    Col,
    Row,
    DatePicker
} from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.option;
const ButtonGroup = Button.Group;
const { RangePicker } = DatePicker;

class AvancedSearch extends React.Component {
    state = {
        drawer_visible: false
    };

    componentWillReceiveProps(nextProps) {
        this.setState({
            drawer_visible: nextProps.drawer_visible
        });
    }

    handleCancel = (index) => {
        this.props.handleForm();
    };

    handleSubmit = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let data = {
                    startDate:
                        values.date.length == 0
                            ? 0
                            : values.date[0]._d.getTime(),
                    endDate:
                        values.date.length == 0
                            ? new Date().getTime()
                            : values.date[1]._d.getTime(),
                    sort: parseInt(values.sort)
                };
                this.props.onAdvancedSearch(
                    values.all_key,
                    values.each_key,
                    values.none_key,
                    values.source,
                    data.startDate,
                    data.endDate,
                    data.sort
                );
                this.onClose();
            }
        });
    };

    onClose = () => {
        this.setState({
            drawer_visible: false
        });
        this.props.onClose(false);
    };

    rangePickerOk = (value) => {
        this.setState({
            startDate: value[0].format()
        });
        console.log(this.state.startDate);
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 20 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 10 }
            }
        };
        const ButtonItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 }
            }
        };

        const SelectItemLayout = {
            labelCol: {
                xs: 12,
                sm: 10
            },
            wrapperCol: {
                xs: { span: 12 },
                sm: { span: 12 }
            }
        };
        const inputStyle = {
            width: '300px'
        };
        const DrawerStyle = {
            width: '100%',
            height: '100%'
        };

        return (
            <Drawer
                title="高级搜索"
                width={720}
                height={500}
                onClose={this.onClose}
                visible={this.state.drawer_visible}
                onCancel={this.handleCancel}
                onOk={this.handleOk}
                placement="top">
                <Form layout="horizontal" onSubmit={this.handleSubmit}>
                    <FormItem
                        className="formitem1"
                        label="包含以下全部关键词"
                        {...formItemLayout}>
                        {getFieldDecorator('all_key', {
                            initialValue: '',
                            rules: []
                        })(
                            <Input
                                placeholder="请输入关键词，多个关键词之间用空格隔开"
                                style={inputStyle}
                            />
                        )}
                    </FormItem>
                    <FormItem
                        className="formitem1"
                        label="包含以下任意一个关键词"
                        {...formItemLayout}>
                        {getFieldDecorator('each_key', {
                            initialValue: '',
                            rules: []
                        })(
                            <Input
                                placeholder="请输入关键词，多个关键词之间用空格隔开"
                                style={inputStyle}
                            />
                        )}
                    </FormItem>
                    <FormItem
                        label="不包含以下关键词"
                        {...formItemLayout}
                        style={{ marginBottom: '5px' }}>
                        {getFieldDecorator('none_key', {
                            initialValue: '',
                            rules: []
                        })(
                            <Input
                                placeholder="请输入关键词，多个关键词之间用空格隔开"
                                style={inputStyle}
                            />
                        )}
                    </FormItem>

                    <FormItem
                        label="排序"
                        {...ButtonItemLayout}
                        style={{ marginBottom: '2px' }}>
                        {getFieldDecorator('sort', {
                            initialValue: '0'
                        })(
                            <RadioGroup>
                                <Radio value="0">时间</Radio>
                                <Radio value="1">热度</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        label="来源"
                        {...ButtonItemLayout}
                        style={{ marginBottom: '2px', height: '50px' }}>
                        {getFieldDecorator('source', {
                            initialValue: '0'
                        })(
                            <RadioGroup style={{ marginTop: '10px' }}>
                                <Radio value="0">
                                    全部
                                    <br />
                                    {this.state.total_data}
                                </Radio>
                                <Radio value="1">
                                    微博
                                    <br />
                                    {this.state.weibo_data}
                                </Radio>
                                <Radio value="2">
                                    微信
                                    <br />
                                    {this.state.weixin_data}
                                </Radio>
                                <Radio value="3">
                                    新闻客户端
                                    <br />
                                    {this.state.bbs_data}
                                </Radio>
                                <Radio value="4">
                                    新闻网站
                                    <br />
                                    {this.state.client_data}
                                </Radio>
                                <Radio value="5">
                                    论坛
                                    <br />
                                    {this.state.web_data}
                                </Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        label="时间范围"
                        {...ButtonItemLayout}
                        style={{ marginBottom: '2px', height: '50px' }}>
                        {getFieldDecorator('date', {
                            initialValue: []
                        })(
                            <RangePicker
                                placeholder={['起始日期', '结束日期']}
                            />
                        )}
                    </FormItem>
                    <FormItem
                        {...ButtonItemLayout}
                        style={{
                            marginBottom: '2px',
                            height: '50px',
                            marginLeft: '20%'
                        }}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </FormItem>
                </Form>
            </Drawer>
        );
    }
}
const avancedSearch = Form.create()(AvancedSearch);
export default avancedSearch;
